import React, {useEffect} from 'react';
import Grid from "@material-ui/core/Grid";

export default function PreviewViz(props) {
  const {scriptCodeData, visualizationDisplay} = props

  useEffect(() => {
    const script = document.createElement("script");
    script.innerHTML = scriptCodeData;
    document.getElementById("root").appendChild(script);
    return () => {
      document.getElementById("root").removeChild(script);
    };
  }, [scriptCodeData]);

  return (
   <>
     <Grid container justify="center" alignItems="center" style={{color: "#000"}}>
       <Grid item>
         {visualizationDisplay}
       </Grid>
     </Grid>
   </>
  );
}